<%@ page language="java" contentType="text/html"  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<link rel="stylesheet" href="${CSS}bootstrap.min.css"/>
		<link rel="stylesheet" href="${CSS}iconfont.css"/>	
		<link rel="stylesheet" href="${CSS}widgets.css"/>
		<link rel="stylesheet" href="${CSS}b.page.bootstrap3.css" type="text/css">
		<link rel="stylesheet" href="${CSS}../../ace/css/tree.css" class="ace-main-stylesheet" id="main-ace-style" />
		<script src="${JS}jquery-3.2.1.min.js" type="text/javascript"></script>
		<script src="${JS}../../layer/layer.js"></script>
		<script src="${JS}bootstrap.min.js"></script>
		<script src="${JS}widgets.js" type="text/javascript"></script>	
		<script src="${JS}../../ace/js/jquery.nestable.min.js"></script>
		<style>
		.dd{max-width:100%;}
		.action-buttons>a{margin-right:10px;}
		a{text-decoration: none;}
		</style>
	</head>
	<body>
	<div class="main-container ace-save-state" id="main-container">
	<div class="main-content">
	<div class="main-content-inner">		
	<script type="text/javascript">
		jQuery(function($){		
			$.get("getTree?parentId=0",function(res){
				$("#nestable").html(res);
				$('.dd').nestable();				
				$('[data-rel="tooltip"]').tooltip();		
			});
		});
		
		function saveSort(){
			$('#modal-table').modal('toggle');
			var dditem=$("#nestable .dd-item");
			var i = 0;
			    (function(){
			        if(i>=dditem.length){location.href='manage';return false;}
			        var itemId=$(dditem[i]).attr("data-id");
					var parentId=$(dditem[i]).parent().attr("parentId");
					if(parentId==null){
						parentId=$(dditem[i]).parent().parent().attr("data-id");
					}
					$.post("sort",{
			            	sort:i,
			            	itemId:itemId,
			            	parentId:parentId	            	
			        },function (res) {
			            	var str="<p style=\"margin-bottom:0px\">"+res+"更新完毕。<i class=\"fa fa-check green bigger-130\"></i></p>";
			                $("#modalConetent").prepend(str);
			        });
					i++;
			        window.setTimeout(arguments.callee,100);
			 })();			
		}
		
		function deleteItem(id){
			$.get("delete?itemId="+id,function(){
				$("li[data-id='"+id+"']").remove();
			});
		}
	</script>
		<div class="widget-box  widget-color-blue" id="3061">
			<div class="widget-header widget-header-small">
				<h6 class="widget-title">
					<i class="iconfont icon-009 size-16">
					</i>
				栏目管理
				</h6>				
				<div class="widget-toolbar no-border">				
					<button class="btn btn-xs btn-default smaller" onclick="saveSort();">
						<i class="iconfont icon-baocun"></i> 保存排序
					</button>		
					<button onclick="location.href='additem';" class="btn btn-xs btn-default smaller">
						<i class="iconfont icon-jia"></i> 添加栏目
					</button>
				</div>
		</div>
		<div class="widget-body">
			<div class="widget-main">
				<table class="table table-bordered table-hover table-condensed" style="border: 0;">
					<thead>
						<tr>
							<th width="140px">栏目Id</th>
							<th>栏目名称</th>
							<th width="250px">URL</th>
							<th width="140px">管理操作</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td colspan="4" style="background: #fff;border: 0;padding: 0;">						    
								<div class="dd" id="nestable"></div>	
							</td>
						</tr>
					</tbody>
				</table>	
			</div>
		</div>
	</div>
	<div class="modal fade" id="modal-table">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					 <h3 id="modalTitle"><i class="icon-spinner icon-spin orange bigger-125"></i>更新栏目中，请稍后。。</h3>
				</div>
				<div class="modal-body" id="modalConetent" style="overflow-y:hidden;max-height:350px;"></div>
			</div>
		</div>
	</div>
	</div>
	</div><!-- /.main-content -->
	</div><!-- /.main-container -->	
	</body>
</html>